<template>
    <a-modal v-model:open="open" :title="date" :keyboard="false" :maskClosable="false">


        <a-form ref="form" :rules="formRules" :model="formState" :label-col="{span: 5}">
            <a-form-item label="行业板块" name="sector">

                <a-select
                    v-model:value="formState.sector"
                    :options="sectors"
                    option-filter-prop="name"
                    :fieldNames="{'label':'name','value':'code'}"
                    mode="multiple"
                    :max-tag-count="2"
                    :max-tag-placeholder="3"
                    show-search
                    allow-clear
                    style="width: 100%"></a-select>
            </a-form-item>

            <a-form-item label="影响描述" name="description">
                <a-textarea
                    v-model:value="formState.description"
                    auto-size
                    />
            </a-form-item>

          <a-form-item label="净流入" name="value">
            <a-input-number v-model:value="formState.value" prefix="￥"></a-input-number>
          </a-form-item>


        </a-form>

      <template #footer>
        <a-button key="back" @click="handleCancel">取消</a-button>
        <a-button key="submit" type="primary" :loading="loading" @click="handleOk">确定</a-button>
      </template>
    </a-modal>
</template>

<script>
import { Modal,Select ,Textarea ,Form,FormItem,InputNumber} from "ant-design-vue";
import {addCalendar,updateCalendar} from "@/api/calendar"
import { mapState } from "vuex";

export default {
    components: {
        AModal: Modal,
        ASelect: Select,
        ATextarea: Textarea,
        AForm: Form,
        AFormItem: FormItem,
        AInputNumber: InputNumber,
    },
    computed:{
        ...mapState('app',['sectors'])
    },
    data(){
        return {
            formState: {
                sector: [],
                description: "",
                value: null
            },
            formRules: {
                sector: [{ required: true, message: '不能为空' }],
                description: [{ required: true, message: '不能为空' }],
                value: [{ required: true, message: '不能为空' }]
            },
            open: false,
            loading: false,
            date: "",
            itemId: 0,
        }
    },
    methods: {
        show(date,item){
            this.open = true;
            this.date = date.format("YYYY-MM-DD");

            if (item){
                this.itemId = item._id
                this.formState.sector = item.sector;
                this.formState.description = item.description;
                this.formState.value = item.value;
            } else {
                this.itemId = 0;
                this.formState.sector = [];
                this.formState.description = "";
                this.formState.value = null;
            }
        },
        handleOk(){


            this.$refs['form'].validateFields().then(()=>{
                this.loading = true;

                let request = addCalendar;
                let params = {
                    date: this.date,
                    ...this.formState
                }

                if (this.itemId){
                    request = updateCalendar;
                    params.id = this.itemId;
                }
                request(params).then(()=>{
                    this.loading = false;
                    this.$emit("success",this.date);
                    this.open = false;
                })

            })
        },
        handleCancel(){
            this.open = false;
        }
    }
}

</script>
